<template>
  <div class="shop_qx">
			<tab v-model="index01" style="position:fixed;top:0px;width:100%;z-index:99;">
				<tab-item selected @on-item-click="onItemClick('65d78288ac08f5977f34795ba81c9d8d')" active-class="active-sel">未付款</tab-item>
				<tab-item @on-item-click="onItemClick('b03260ceba1aaae972eb7de7e46220ba')" active-class="active-sel">待核销</tab-item>
				<tab-item @on-item-click="onItemClick('a2d743fdd342ddd8789a19ef88a7147f')" active-class="active-sel">已完成</tab-item>
			</tab>
			<scroll ref="scroll"
              :data="dataList"
              :scrollbar="scrollbarObj"
              :pullUpLoad="pullUpLoadObj"
              :startY="parseInt(startY)"
							:pos="'top:-0px'"
              @pullingUp="onPullingUp"
							class="p">
				<div v-show="!isLoading && dataList" slot="content" >
					<div  v-for="(item,key) in dataList" :key="key">
							<div slot="content" class=" vux-1px-t">
									<div class="order_item" style="margin-bottom:.25rem;">
										<group>
											<cell :title="item.shopName" :inline-desc="item.createTime" :link="{path:'/shangjia',query:{title:item.shopName,id:item.shopId}}">
												<img slot="icon" :src="item.shopImg" class="shop-img">
												<div slot="value">
													<span style="color:red;padding-right:15px;font-size:0.36rem;" v-if="item.status ===0 ">订单未付款</span>
													<span style="color: #2e9670;padding-right:15px;font-size:0.36rem;" v-if="item.status ===1 ">订单已付款</span>
													<span style="color: #2e9670;padding-right:15px;font-size:0.36rem;" v-if="item.status ===2 ">订单已完成 </span>
													<!-- <i class="icon-right"></i> -->
												</div>
											</cell>
										</group>
										<div class="order_info">
											<transition-group name="fade" tag="div">
												<div class="order_det_info" v-for="(i,key) in item.orderItems" :key="key"  v-show="!item.selected">
													<div class="det_info_name" >{{i.productName}}</div>
													<div class="det_info_num" >x{{i.quantity}}</div>
													<div class="det_info_num">￥{{i.price}}</div>
												</div>
											</transition-group>
											<div :class="{more_up:!item.selected,more_down:item.selected}" class="order_info_more iconfont" v-on:click="onCollapse(item)">{{item.selected?`还有${item.orderItems.length}个商品`:'收起商品'}}</div>
											<div class="order_item_total">
												<div class="total_mon">合计：￥{{item.totalPrice}}</div>
												<div class="total_det">
													<x-button mini plain  v-if="item.commented === 1 " disabled style="border-color:#ccc">已评价</x-button>
													<x-button mini plain type="primary" v-if="item.status ===2 && item.commented === 0" style="margin-top:0px;color:#2e9670;border-color:#2e9670;" @click.native="onEvaluate(item)">评价</x-button>
													<x-button mini plain type="primary" v-if="item.status ===1 && item.shopType !== 1" style="margin-top:0px;color:#2e9670;border-color:#2e9670;" @click.native="onEnter(item)">核销</x-button>
													<x-button mini plain type="primary" v-if="item.status ===1  && item.shopType===1" style="margin-top:0px;color:#2e9670;border-color:#2e9670;" @click.native="onEnter(item)">确认收货</x-button>
													<span v-if="item.status ===0 && item.orderType === 2 " @click="onPayment(item.id,item.shopId,$event)" style="color:red;border:1px solid red;border-radius:4px;padding:.25rem .6rem;font-size:12px;">去付款</span>
													<!-- 暂时隐藏 -->
													<x-button mini plain type="primary" v-if="item.status ===2 ||  item.status ===1" style="margin-top:0px;color:#2e9670;border-color:#2e9670;" @click.native="onDetails(item)">详情</x-button>
												</div>
											</div>
										</div>
									</div>
								</div>
						</div>
				</div>
				<div class="order-empty p" v-show="!isLoading && !dataList" slot="content">
					<i class="icon-order" ></i>
					<div>
						<p>没有任何订单</p>
					</div>
				</div>
			</scroll>
		<footer-component></footer-component>
	</div>
</template>
<script>
import {Cell,Group,XButton,Tab,TabItem} from 'vux'
import FooterComponent from 'components/footer'
import {getStore} from '@/config/mUtils'
import Scroll from 'components/scroll/scroll.vue'
import {mapMutations} from 'vuex'
export default {
  components: {
		Cell,
		Group,
		XButton,
		FooterComponent,
		Tab,
		TabItem,
		Scroll
	},
	data () {
		return {
			dataList: [],
			isLoading: false,
			index01: 0,
			page: 1,
			isMore: true,
			selId: '65d78288ac08f5977f34795ba81c9d8d',
			scrollbar: true,
      scrollbarFade: true,
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: '上拉加载更多数据',
      pullUpLoadNoMoreTxt: '没有更多数据了',
      startY: 0
		}
	},
	created(){
		this.dataList = []
	},
	mounted(){
		this.initData()
	},
	beforeDestroy(){
		this.page = 0
	},
	methods: {
		...mapMutations([
      'CLEAR_CART'
    ]),
		// 初始订单数据
		initData(id='65d78288ac08f5977f34795ba81c9d8d'){
			this.isLoading = true;
			// 获取订单数据
			this.$http.get(`order/list/openId/${getStore('wxcode')}/pageCount/${this.page}/?status=${id}`)
				.then(({data})=>{
					if(data.status === '200'){
						if(data.data === null){
							this.$vux.toast.show({
								type: 'warn',
								text: '没有更多数据了!',
								time: 2000
							})
							this.isMore = false
						}else{
							this.dataList = this.dataList.concat(data.data)
						}
						this.isLoading = false;
					}
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'success',
						text: '没有订单数据',
						time: 2000
					})
				})
		},
		// 展开收起商品
		onCollapse (item) {
			if(typeof item.selected =='undefined'){//判断是否未定义，如果没点击过按钮是没有注册的，则需要先注册selected属性
				this.$set(item,"selected",true)//局部注册
			}else{
				item.selected = !item.selected
			}
		},
		// 评价
		onEvaluate(item){
			if(item){
				this.$router.push({path:'/goods/orderComplete/evaluate',query:item})
			}
		},
		// 完成支付
		onPayment(id,shopId,$event){
			$event.preventDefault();
			// $event.stopPropagation();
			var _this = this
			this.$http.post(`payGetWay/orderId/${id}/openId/${getStore('wxcode')}/wx/pay`)
				.then(({data})=>{
					if(data.status === '200'){
             this.$wechat.chooseWXPay({
                timestamp: data.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: data.data.nonceStr, // 支付签名随机串，不长于 32 位
                package: `prepay_id=${data.data.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: data.data.sign, // 支付签名
                success: function (res) {
									_this.index01 = 1
									_this.CLEAR_CART();
									// 清空购物车
									// _this.$http.post(`cart/shop/${shopId}/user/${getStore('wxcode')}/delete/`)
                  //   .then(({data})=>{
                  //     this.$vux.toast.show({
                  //       type: 'success',
                  //       text: '已清空购物车',
                  //       time: 2000
                  //     })
                  //   }).catch(err=>{
                  //     this.$vux.toast.show({
									// 			type: 'warn',
									// 			text: '购物车清空失败',
									// 			time: 2000
                  //   })
                  // })
									_this.onItemClick('b03260ceba1aaae972eb7de7e46220ba');
                }
             });
            }
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'warn',
						text: '支付失败',
						time: 2000
					})
				})
		},
		// 核销
		onEnter(item){
			let that = this;
			if(item){
					this.$vux.confirm.show({
						title: '确认核销',
						content: '是否确认核销',
						onCancel () {
							// console.log('取消');
						},
						onConfirm () {
							that.$http.post(`order/${item.id}/openId/${getStore('wxcode')}/confirm`)
							.then(({data})=>{
								if(data.status === '200'){
									that.$vux.toast.show({
										type: 'success',
											text: '核销成功',
											time: 2000
									})
									that.index01 = 2
									that.onItemClick('a2d743fdd342ddd8789a19ef88a7147f');
								}
							}).catch(err=>{
								that.$vux.toast.show({
									type: 'warn',
									text: '核销失败',
									time: 2000
								})
							})	
						}
					});
			}
		},
		// 订单详情
		onDetails(item){
			if(item){
				this.$router.push({path:'/goods/orderComplete',query:{id:item.id}})
			}
		},
		onItemClick(id){
			this.isLoading = true;
			this.selId = id;
			// 获取订单数据
			this.$http.get(`order/list/openId/${getStore('wxcode')}/pageCount/1/?status=${id}`)
				.then(({data})=>{
					if(data.status === '200'){
						this.dataList = data.data
						this.isLoading = false;
					}
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'warn',
						text: '获取订单信息失败',
						time: 2000
					})
				})
		},
		onPullingUp() {
      this.page++
    },
    rebuildScroll() {
      this.$nextTick(() => {
        this.$refs.scroll.destroy()
        this.$refs.scroll.initScroll()
      })
    },
  },
	watch:{
		page(){
			this.initData(this.selId);
		},
		scrollbarObj: {
      handler() {
        this.rebuildScroll()
      },
      deep: true
    },
    pullUpLoadObj: {
      handler() {
        this.rebuildScroll()
      },
      deep: true
    },
    startY() {
      this.rebuildScroll()
    },
	},
	computed:{
		scrollbarObj: function () {
      return this.scrollbar ? {fade: this.scrollbarFade} : false
    },
    pullUpLoadObj: function () {
      return this.pullUpLoad ? {
        threshold: parseInt(this.pullUpLoadThreshold),
        txt: {more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt}
      } : false
    }
	}
}
</script>
<style scoped>
.p{
	position:absolute;top:44px !important;width:100%;padding-bottom:65px;
	margin-bottom: 65px;
}
/* 订单为空 */
.order-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	-webkit-flex-direction: column;
	-webkit-align-items: center;
	-webkit-align-content: center;
	-moz-flex-direction: column;
	-moz-align-items: center;
	-moz-align-content: center;
	padding: 2.5rem 0rem;
}
.order-empty i{
	margin-bottom: .46rem;
}
.order-empty i::before{
	font-size: 1.125rem;
	padding: 1rem;
	display: inline-block;
	background-color: #e5e5e5;
	color: #fff;
	border: 1px solid transparent;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.order-empty p{
	font-size: .46rem;
	color: #aaaaaa;
}
.icon-right{
	content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
  transform: matrix(.71,.71,-.71,.71,0,0);
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 15px
}
.shop-img{
	width: 1.2rem;
	height: 1.2rem;
	margin-right: .46rem;
	border-radius: 50%;
	border: 2px solid #eee;
}
.btn-red{
	border-color: red;
	color: red;
}

/*过渡效果*/ 
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
	-webkit-transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
.order_item{
	width: 100%;
	background-color: #fff;

}
/*全选*/
.check-all{
	display: flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
} 
.store_info{
	display: -webkit-box;
	-webkit-box-align: center;
	font-size: 0.5rem;
	padding: 0.4rem 0;
	margin-left: 0.4rem;
	border-bottom: 1px solid #e5e5e5;
}
.store_info > .vux-checker-box{
	flex: 1;
	-webkit-flex: 1;
	-moz-flex: 1;
}
.nochoose:before{
	font-family: 'iconfont';
	content: "\c009";
	font-size: 0.8rem;
	color: #2e9670;
	margin-right: 0.26rem;
	padding-left: 0.1rem;
}
.choose:before{
  font-family: 'iconfont';
	content: "\b008";
	font-size: 0.8rem;
	color: #2e9670;
	margin-right: 0.26rem;
	padding-left: 0.1rem;
}
.store_name{
	-webkit-box-flex: 1;
	font-weight: 700;
	font-size: 0.46rem;
}
.comm_right:before{
  font-family: 'iconfont';
	content: "\c001";
	font-size: 0.7rem;
	margin-right: 0.28rem;
	color: #aaaaaa;
}
.order_det_info{
	display: -webkit-box;
    font-size: 0.48rem;
	padding-top: 0.5rem;
	padding-left: 0.3rem;
	margin-left: 0.4rem;
}
.det_info_name{
	-webkit-box-flex: 1;
}
.det_info_num{
	width: 2.3rem;
}
.order_info_more{
	text-align: center;
	font-size: 0.36rem;
	padding: 0.3rem 0 0.26rem 0;
	border-bottom: 1px solid #e5e5e5;
	color: #727272;
}
.order_item_total{
	display: -webkit-box;
	-webkit-box-align: center;
	padding: 0.42rem 0;
}
.ord_it_to_border{
		border-bottom: 0.3rem solid #f7f7f7;
}
.total_mon{
	-webkit-box-flex: 1;
	margin-left: 0.5rem;
	font-size: 0.5rem;
	font-weight: 700;
}
.total_det{
	margin-right: .5rem;
	color: #727272;
	font-size: 0.4rem;
}
.order_bottom{
	width: 100%;
	display: -webkit-box;
	position: fixed;
	bottom: 0;
	left: 0;
	-webkit-box-align: center;
	font-size: 0.5rem;
	background-color: #fff;
	padding-left: 0.4rem;
}
.order_mon{
	-webkit-box-flex: 1;
	text-align: end;
	margin-right: 0.4rem;
}
.order_account{
	width: 4.1rem;
	height: 1.56rem;
	background-color: #2e9670;
	color: #fff;
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	font-size: 0.46rem;
}
.more_down:after{
  font-family: 'iconfont';
	content: "\c005";
	margin-left: 0.2rem;
	font-size: 0.5rem;
}
.more_up:after{
  font-family: 'iconfont';
	content: "\c006";
	margin-left: 0.2rem;
	font-size: 0.5rem;
}
.active-sel {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
</style>
